<template>
  <div>
    <!-- 面包屑 -->
    <el-bread></el-bread>
    <!-- 添加按钮 -->
    <el-button @click='add' class="btn" type='primary' size='small' plain>添加</el-button>
    <!-- 列表渲染 -->
    <v-list @edit='edit'></v-list>
    <!-- 弹框 -->
    <v-dialog ref="dialogInfo" @cancel='cancel' :info='info'></v-dialog>
  </div>
</template>

<script>
//引入封装好的子组件
import vList from './list.vue'
import vDialog from './dialog.vue'
export default {
  data() {
    return {
        info:{
            isShow:false,//控制弹框显示隐藏
            isAdd:true,//用于区分添加或者编辑
        }
    };
  },
  methods: {
      //封装一个添加打开弹框
      add(){
          //打开弹框并且告诉弹框你是一个添加
          this.info.isShow = true
          this.info.isAdd = true
      },
      //封装一个编辑打开弹框
      edit(e){
          //打开弹框并且告诉弹框你是一个编辑
          this.info.isShow = true
          this.info.isAdd = false
          //直接调用弹框子组件的查询事件
          this.$refs.dialogInfo.lookup(e)
      },
      //封装一个关闭弹框事件
      cancel(e){
          //关闭弹框
          this.info.isShow = e
      }
  },
  components:{
      vList,
      vDialog
  }
};
</script>

<style scoped>
.btn{
    margin: 10px;
}
</style>
